<!--
 * @Description: 
 * @Version: 1.0.1
 * @Autor: hrlu.cn
 * @Date: 2022-02-27 21:44:06
 * @LastEditors: hrlu.cn
 * @LastEditTime: 2022-02-27 21:54:48
-->
{% extends "base.html" %}

{% block cssextend %}
{% endblock %}

{% block cssstyle %}
{% endblock %}

{% block content %}
     <!-- DATA TABLE-->
     <section class="p-t-20">
        <div class="container">
            <div class="row">
                <div class="col-12" id="message-box">
                    
                </div>
            </div>
            <div class="row">
                <div class="col-lg-5">
                    <div class="card">
                        <div class="card-header">
                            <strong>设置</strong>
                        </div>
                        <form id="manualExport" enctype="multipart/form-data" class="form-horizontal">
                            {% csrf_token %}
                            <div class="card-body card-block">
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="select" class="form-control-label">数据类型</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <select name="source_select" id="source_select" auto-cache-id="export:source_select:str" class="form-control form-control-sm">
                                            {% for name, source in sources.items %}
                                                <option value="{{ name }}">{{ source.desp }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="row form-group" id="writeType">
                                    <div class="col col-md-3">
                                        <label for="text-input" class="form-control-label">写入类型</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <select name="write_type" id="write_type" auto-cache-id="export:write_type:str" class="form-control form-control-sm">
                                            {% for key, val in types.items %}
                                                <option value="{{ key }}">{{ val }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="row form-group" id="dbAddress">
                                    <div class="col col-md-3">
                                        <label for="text-input" class="form-control-label">地址</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="text" id="db_address" name="db_address" placeholder="" auto-cache-id="export:db_address:str" class="input-sm form-control-sm form-control">
                                        <small class="form-text text-muted">IP地址/域名</small>
                                    </div>
                                </div>
                                <div class="row form-group" id="dbPort">
                                    <div class="col col-md-3">
                                        <label for="text-input" class="form-control-label">端口号</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="text" id="db_port" name="db_port" placeholder="" auto-cache-id="export:db_port:str" class="input-sm form-control-sm form-control" value="3306">
                                    </div>
                                </div>
                                <div class="row form-group" id="dbName">
                                    <div class="col col-md-3">
                                        <label for="text-input" class="form-control-label">数据库名</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="text" id="db_name" name="db_name" placeholder="" auto-cache-id="export:db_name:str" class="input-sm form-control-sm form-control" value="stock_filter">
                                    </div>
                                </div>
                                <div class="row form-group" id="dbTable">
                                    <div class="col col-md-3">
                                        <label for="text-input" class="form-control-label">表名</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="text" id="db_table" name="db_table" placeholder="" auto-cache-id="export:db_table:str" class="input-sm form-control-sm form-control" value="">
                                    </div>
                                </div>
                                <div class="row form-group" id="dbUser">
                                    <div class="col col-md-3">
                                        <label for="text-input" class="form-control-label">用户名</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="text" id="db_user" name="db_user" placeholder="" auto-cache-id="export:db_user:str" class="input-sm form-control-sm form-control">
                                    </div>
                                </div>
                                <div class="row form-group" id="dbPass">
                                    <div class="col col-md-3">
                                        <label for="text-input" class="form-control-label">密码</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="password" id="db_pass" name="db_pass" placeholder="" class="input-sm form-control-sm form-control">
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="card-footer">
                            <button type="" id="executeExport" class="au-btn au-btn-icon au-btn--blue au-btn--small">
                                <i class="fa fa-dot-circle-o"></i>提交
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="card">
                        <div class="card-header">
                            <strong>日志</strong>
                        </div>
                        <div class="card-body card-block">
                            <div class="table-responsive">
                                <table class="table table-top-campaign" id="exportLog">
                                    <thead>
                                        <tr>
                                            <td style="min-width: 120px;">时间</td>
                                            <td style="color: #666">信息</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block jsextend %}
{% endblock %}

{% block jsscript %}
<script>
    var tables = {
        {% for src, info in sources.items %}
            {{ src }}: "{{ info.table_name }}",
        {% endfor %}
    };
    $('#source_select').change(function () {
        $('#db_table').val('exp_' + tables[$('#source_select').val()]);
    });
    $('#db_table').val('exp_' + tables[$('#source_select').val()]);

    $('#executeExport').click(function (){
        if ($('#executeExport').hasClass('au-btn--disabled')) {
            return;
        }

        var postData = $('#manualExport').parseForm();
        $('#executeExport').addClass('au-btn--disabled');

        $.ajax({
            url: "/api/export_data", 
            type: "POST",
            data: postData,
            success: function(data){
                if (data.code == '0') {
                    message(data.msg);
                } else {
                    message(data.msg, 'warn');
                }

                $('#executeExport').removeClass('au-btn--disabled');
            }
        });
    });

    var updateLog = function (){
        if (document.hidden) {
            return;
        }
        $.ajax({
            url: "/api/log?sort=-timestamp&module=export",
            success: function(data) {
                $('#exportLog tbody tr').remove();
                for (var idx in data.rows) {
                    var row = data.rows[idx];
                    $('#exportLog tbody').append(`
                        <tr>
                            <td>
                                <a href="#" data-toggle="tooltip" style="color: #666;" title="` + row.timestamp + `">` + row.timestamp.substr(0,10) + `</a>
                            </td>
                            <td style="color: #666">` + row.message + `</td>
                        </tr>
                    `);
                }
                $(function () { $("[data-toggle='tooltip']").tooltip(); });
            } 
        });
    }
    updateLog();
    //setInterval(updateLog, 5000);
</script>
{% endblock %}